'use strict';
import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import * as defaultStyles from '../constants/DefaultStyles';
import WhiteView from '../components/WhiteView';

export default class FilterMenu extends Component {
  constructor(props) {
    super(props);

    let payment = '-1';
    if (props.code === 'svcW') {
      payment = '0';
    }
    else if (props.code === 'svcP') {
      payment = '1';
    }

    let state = '-1';
    if (props.stat === 'ST00') {
      state = '0';
    }
    else if (props.stat === 'ST08') {
      state = '1';
    }
    else if (props.stat === 'ST09') {
      state = '2';
    }
    else if (props.stat === 'ST10') {
      state = '3';
    }
    this.state = {
      payment: payment,
      state: state,
    }
  }
  _stateButtons(count) {
    let btnArr = [];
    let textArr = [
      '交易成功',
      '交易失败',
      '未支付',
      '已关闭'
    ];
    let statArr = [
      'ST00',
      'ST08',
      'ST09',
      'ST10',
    ];
    for(let i = 0; i < count; i++) {
        btnArr.push(
          <TouchableHighlight style={[styles.stateBtn, {marginRight: 5, backgroundColor: this.state.state === String(i) ? defaultStyles.LIGHTBLUE : 'white'}]}
                              onPressOut={() => this.setState({stat: statArr[i], state: String(i)})}
                              underlayColor={defaultStyles.LIGHTBLUE} key={i}>
            <Text style={[styles.paymentBtnText, {color: this.state.state === String(i) ? 'white' : 'black'}]}>{textArr[i]}</Text>
          </TouchableHighlight>
        );
    }
    return btnArr;
  }
  render() {
    return (
      <View style={[styles.container, this.props.style]}>
        <View style={styles.bottomBtns}>
          <TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center'
          , borderWidth: 0.5, borderColor: '#F5F5F5'}} onPress={() => {
            this.state.code = undefined;
            this.state.stat = undefined;
            this.setState({state: '-1', payment: '-1'})
          }}>
            <Text style={{color: defaultStyles.LIGHTBLUE, fontSize: 18}}>重置</Text>
          </TouchableOpacity>
          <TouchableOpacity style={{flex: 3, justifyContent: 'center', alignItems: 'center'
          , backgroundColor: defaultStyles.LIGHTBLUE}} onPress={() => this.props.didSelected(this.state.code, this.state.stat)}>
            <Text style={{color: 'white', fontSize: 18}}>确定</Text>
          </TouchableOpacity>
        </View>
        <View style={{flex: 1, flexDirection: 'row'}}>
          <WhiteView />
          <View style={{flex: 1}}>
            <View style={styles.payment}>
              <View style={{flex: 1, justifyContent: 'center'}}>
                <Text style={{fontSize: 18}}>支付方式</Text>
              </View>
              <View style={{flex: 1.5, justifyContent: 'flex-start', flexDirection: 'row'}}>
                <TouchableHighlight style={[styles.paymentBtn, {marginRight: 5, backgroundColor: this.state.payment === '0' ? defaultStyles.LIGHTBLUE : 'white'}]}
                                    onPressOut={() => this.setState({code: 'svcW', payment: '0'})}
                                    underlayColor={defaultStyles.LIGHTBLUE}>
                  <Text style={[styles.paymentBtnText, {color: this.state.payment === '0' ? 'white' : 'black'}]}>微信支付</Text>
                </TouchableHighlight>
                <TouchableHighlight style={[styles.paymentBtn, {marginLeft: 5, backgroundColor: this.state.payment === '1' ? defaultStyles.LIGHTBLUE : 'white'}]}
                                    onPressOut={() => this.setState({code: 'svcP', payment: '1'})}
                                    underlayColor={defaultStyles.LIGHTBLUE}>
                  <Text style={[styles.paymentBtnText, {color: this.state.payment === '1' ? 'white' : 'black'}]}>支付宝</Text>
                </TouchableHighlight>
              </View>
            </View>
            <View style={styles.paymentStatus}>
              <View style={{flex: 1, justifyContent: 'center'}}>
                <Text style={{fontSize: 18}}>支付状态</Text>
              </View>
              <View style={{flex: 1.5, justifyContent: 'flex-start', flexDirection: 'row'}}>
                {this._stateButtons(4)}
              </View>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    flexDirection: 'column-reverse',
  },
  payment: {
    flex: 1,
    borderBottomWidth: 1,
    borderBottomColor: '#F5F5F5',
  },
  paymentBtn: {
    borderWidth: 1,
    borderColor: '#F4F4F4',
    borderRadius: 5,
    height: 50,
    width: 100,
    justifyContent: 'center',
    alignItems: 'center'
  },
  paymentBtnText: {
    fontSize: 16,
    textAlign: 'center'
  },
  paymentStatus: {
    flex: 1,
  },
  stateBtn: {
    borderWidth: 1,
    borderColor: '#F4F4F4',
    borderRadius: 5,
    height: 45,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  bottomBtns: {
    height: 50,
    flexDirection: 'row',
  },
});